<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>配置参考 | Riant</title>
    <meta name="description" content="可配置化的React开发和构建工具">
    
    
    <link rel="preload" href="/riant/assets/css/0.styles.05fc49ce.css" as="style"><link rel="preload" href="/riant/assets/js/app.c1a7218f.js" as="script"><link rel="preload" href="/riant/assets/js/2.d60fca52.js" as="script"><link rel="preload" href="/riant/assets/js/9.90554817.js" as="script"><link rel="prefetch" href="/riant/assets/js/10.29a53b58.js"><link rel="prefetch" href="/riant/assets/js/11.877d71ba.js"><link rel="prefetch" href="/riant/assets/js/3.b8eea38a.js"><link rel="prefetch" href="/riant/assets/js/4.2ff4637c.js"><link rel="prefetch" href="/riant/assets/js/5.c27fa50a.js"><link rel="prefetch" href="/riant/assets/js/6.5712c03c.js"><link rel="prefetch" href="/riant/assets/js/7.57f72445.js"><link rel="prefetch" href="/riant/assets/js/8.c4debeb8.js">
    <link rel="stylesheet" href="/riant/assets/css/0.styles.05fc49ce.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="navbar-container"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/riant/zh/" class="home-link router-link-active"><img src="/riant/logo.svg" alt="Riant" class="logo"> <span class="site-name can-hide">Riant</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/riant/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/riant/zh/config/" class="nav-link router-link-exact-active router-link-active">配置参考</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="语言菜单" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/riant/config/" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a href="/riant/zh/config/" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/riant" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></div></header> <div class="page-container"><div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/riant/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/riant/zh/config/" class="nav-link router-link-exact-active router-link-active">配置参考</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="语言菜单" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/riant/config/" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a href="/riant/zh/config/" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/riant" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>配置参考</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/riant/zh/config/#riant-config-js" class="sidebar-link">riant.config.js</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/riant/zh/config/#alias" class="sidebar-link">alias</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#babelplugins" class="sidebar-link">babelPlugins</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#chainwebpack" class="sidebar-link">chainWebpack</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#configurewebpack" class="sidebar-link">configureWebpack</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#css" class="sidebar-link">css</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#define" class="sidebar-link">define</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#devserver" class="sidebar-link">devServer</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#extensions" class="sidebar-link">extensions</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#externals" class="sidebar-link">externals</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#filenamehashing" class="sidebar-link">filenameHashing</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#jest" class="sidebar-link">jest</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#pages" class="sidebar-link">pages</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#paths" class="sidebar-link">paths</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#parallel" class="sidebar-link">parallel</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#progressbar" class="sidebar-link">progressBar</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#riantplugins" class="sidebar-link">riantPlugins</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#useeslintrc" class="sidebar-link">useEslintrc</a></li></ul></li><li><a href="/riant/zh/config/#扩展-webpack-配置" class="sidebar-link">扩展 Webpack 配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/riant/zh/config/#兼容-ie9" class="sidebar-link">兼容 ie9</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#移除-console-log" class="sidebar-link">移除 console.log</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#代码拆分" class="sidebar-link">代码拆分</a></li><li class="sidebar-sub-header"><a href="/riant/zh/config/#修改打包配置" class="sidebar-link">修改打包配置</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="配置参考"><a href="#配置参考" class="header-anchor">#</a> 配置参考</h1> <h2 id="riant-config-js"><a href="#riant-config-js" class="header-anchor">#</a> riant.config.js</h2> <p><code>riant.config.js</code> 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 <code>riant-scripts</code> 自动加载。</p> <p>这个文件应该导出一个包含了选项的对象：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// riant.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 选项...</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="alias"><a href="#alias" class="header-anchor">#</a> alias</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>配置别名</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  alias<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">'@'</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">alias</span><span class="token punctuation">(</span><span class="token parameter">chainedMap<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    chainedMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="babelplugins"><a href="#babelplugins" class="header-anchor">#</a> babelPlugins</h3> <ul><li><p>Type: Array | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>配置 babel 插件</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  babelPlugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">'import'</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        libraryName<span class="token operator">:</span> <span class="token string">'antd'</span><span class="token punctuation">,</span>
        libraryDirectory<span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
        style<span class="token operator">:</span> <span class="token string">'css'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token string">'fix-import-imports'</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span> 
    <span class="token punctuation">[</span><span class="token string">'@babel/plugin-proposal-decorators'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> legacy<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">babelPlugins</span><span class="token punctuation">(</span><span class="token parameter">plugins<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
      <span class="token punctuation">[</span>
        <span class="token string">'import'</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          libraryName<span class="token operator">:</span> <span class="token string">'antd'</span><span class="token punctuation">,</span>
          libraryDirectory<span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
          style<span class="token operator">:</span> <span class="token string">'css'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token string">'fix-import-imports'</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'@babel/plugin-proposal-decorators'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> legacy<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">babelPlugins</span><span class="token punctuation">(</span><span class="token parameter">plugins<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> plugins<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">[</span>
        <span class="token string">'import'</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          libraryName<span class="token operator">:</span> <span class="token string">'antd'</span><span class="token punctuation">,</span>
          libraryDirectory<span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
          style<span class="token operator">:</span> <span class="token string">'css'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token string">'fix-import-imports'</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'@babel/plugin-proposal-decorators'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> legacy<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="chainwebpack"><a href="#chainwebpack" class="header-anchor">#</a> chainWebpack</h3> <ul><li><p>Type: Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>增加自定义配置</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">chainedConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">===</span> <span class="token string">'production'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 移除 `console.log`</span>
      chainedConfig<span class="token punctuation">.</span>optimization
        <span class="token punctuation">.</span><span class="token function">minimizer</span><span class="token punctuation">(</span><span class="token string">'TerserPlugin'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">plugin</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          plugin<span class="token punctuation">.</span>options<span class="token punctuation">.</span>terserOptions<span class="token punctuation">.</span>compress<span class="token punctuation">.</span>pure_funcs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'console.log'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token keyword">return</span> plugin<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="configurewebpack"><a href="#configurewebpack" class="header-anchor">#</a> configureWebpack</h3> <ul><li><p>Type: Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>增加自定义配置</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token parameter">objectConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">===</span> <span class="token string">'production'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// without `console.log`</span>
      objectConfig
        <span class="token punctuation">.</span>optimization
        <span class="token punctuation">.</span>minimizer<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        <span class="token punctuation">.</span>options
        <span class="token punctuation">.</span>terserOptions
        <span class="token punctuation">.</span>compress
        <span class="token punctuation">.</span>pure_funcs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'console.log'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="css"><a href="#css" class="header-anchor">#</a> css</h3> <ul><li><p>Type: Object</p></li> <li><p>Default: {}</p></li></ul> <p><strong>配置 loader 参数</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  css<span class="token operator">:</span> <span class="token punctuation">{</span>
    loaderOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
      stylus<span class="token operator">:</span> <span class="token punctuation">{</span>
        define<span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token string">'$cdn'</span><span class="token operator">:</span> <span class="token string">'https://cdn.jsdelivr.net'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="define"><a href="#define" class="header-anchor">#</a> define</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>定义全局常量</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  define<span class="token operator">:</span> <span class="token punctuation">{</span>
    __version__<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token string">'1.0.0'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">define</span><span class="token punctuation">(</span><span class="token parameter">chainedMap<span class="token punctuation">,</span> env<span class="token punctuation">,</span> service</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      __version__<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token string">'1.0.0'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="devserver"><a href="#devserver" class="header-anchor">#</a> devServer</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: {}</p></li></ul> <p><strong>配置本地开发服务</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">{</span> 
    proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">'http://localhost:8088'</span><span class="token punctuation">,</span>
        changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">devServer</span><span class="token punctuation">(</span><span class="token parameter">devConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    devConfig<span class="token punctuation">.</span>proxy <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">'http://localhost:8088'</span><span class="token punctuation">,</span>
        changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="extensions"><a href="#extensions" class="header-anchor">#</a> extensions</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>查找文件的扩展名集合</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  extensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.properties'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">extensions</span><span class="token punctuation">(</span><span class="token parameter">chainedSet<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    chainedSet<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.properties'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="externals"><a href="#externals" class="header-anchor">#</a> externals</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>导入外部扩展</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  externals<span class="token operator">:</span> <span class="token punctuation">{</span>
    jquery<span class="token operator">:</span> <span class="token string">'jQuery'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">externals</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      jquery<span class="token operator">:</span> <span class="token string">'jQuery'</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="filenamehashing"><a href="#filenamehashing" class="header-anchor">#</a> filenameHashing</h3> <ul><li><p>Type: Boolean</p></li> <li><p>Default: true</p></li></ul> <p><strong>是否移除 hash 文件名</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  filenameHashing<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="jest"><a href="#jest" class="header-anchor">#</a> jest</h3> <ul><li><p>Type: Function</p></li> <li><p>Default: config =&gt; config</p></li></ul> <p><strong>jest 配置</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">jest</span><span class="token punctuation">(</span><span class="token parameter">jestConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> jestConfig<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="pages"><a href="#pages" class="header-anchor">#</a> pages</h3> <ul><li><p>Type: Object</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>配置多页支持</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  pages<span class="token operator">:</span> <span class="token punctuation">{</span>
    index<span class="token operator">:</span> <span class="token string">'src/index.js'</span><span class="token punctuation">,</span>
    home<span class="token operator">:</span> <span class="token string">'src/home.js'</span><span class="token punctuation">,</span>
    form<span class="token operator">:</span> <span class="token string">'src/form.js'</span><span class="token punctuation">,</span>
    notfound<span class="token operator">:</span> <span class="token string">'src/notfound.js'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="paths"><a href="#paths" class="header-anchor">#</a> paths</h3> <ul><li><p>Type: Object | Function</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>配置内置的 paths</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  paths<span class="token operator">:</span> <span class="token punctuation">{</span> 

  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">paths</span><span class="token punctuation">(</span><span class="token parameter">pathsConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="parallel"><a href="#parallel" class="header-anchor">#</a> parallel</h3> <ul><li><p>Type: Boolean</p></li> <li><p>Default: false</p></li></ul> <p><strong>为 Babel 或 TypeScript 使用 thread-loader，仅作用于生产构建</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  parallel<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="progressbar"><a href="#progressbar" class="header-anchor">#</a> progressBar</h3> <ul><li><p>Type: Boolean | Object</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>增加进度条</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  progressBar<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  progressBar<span class="token operator">:</span> <span class="token punctuation">{</span>
    progress<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    profileLevel<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    profile<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    modulesCount<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
    modules<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    activeModules<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    entries<span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="riantplugins"><a href="#riantplugins" class="header-anchor">#</a> riantPlugins</h3> <ul><li><p>Type: Array</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>增加自定插件至 riant-scripts</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  riantPlugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">service<span class="token punctuation">,</span> projectOptions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p><a href="https://github.com/fengxinming/riant/tree/master/packages/riant-scripts/lib/plugins" target="_blank" rel="noopener noreferrer">插件参考<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h3 id="useeslintrc"><a href="#useeslintrc" class="header-anchor">#</a> useEslintrc</h3> <ul><li><p>Type: Boolean</p></li> <li><p>Default: undefined</p></li></ul> <p><strong>自定义 eslintrc 文件，扩展 eslint 规则</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  useEslintrc<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="扩展-webpack-配置"><a href="#扩展-webpack-配置" class="header-anchor">#</a> 扩展 Webpack 配置</h2> <h3 id="兼容-ie9"><a href="#兼容-ie9" class="header-anchor">#</a> 兼容 ie9</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* riant.config.js */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">chainedConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">===</span> <span class="token string">'production'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      chainedConfig
        <span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span>require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'react-app-polyfill/stable'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span>require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'react-app-polyfill/ie9'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="移除-console-log"><a href="#移除-console-log" class="header-anchor">#</a> 移除 console.log</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* riant.config.js */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">chainedConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">===</span> <span class="token string">'production'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      chainedConfig<span class="token punctuation">.</span>optimization
        <span class="token punctuation">.</span><span class="token function">minimizer</span><span class="token punctuation">(</span><span class="token string">'TerserPlugin'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">plugin</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          plugin<span class="token punctuation">.</span>options<span class="token punctuation">.</span>terserOptions<span class="token punctuation">.</span>compress<span class="token punctuation">.</span>pure_funcs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'console.log'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token keyword">return</span> plugin<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="代码拆分"><a href="#代码拆分" class="header-anchor">#</a> 代码拆分</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* riant.config.js */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">chainedConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">!==</span> <span class="token string">'test'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      chainedConfig<span class="token punctuation">.</span>optimization
        <span class="token punctuation">.</span><span class="token function">splitChunks</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          cacheGroups<span class="token operator">:</span> <span class="token punctuation">{</span>
            vendors<span class="token operator">:</span> <span class="token punctuation">{</span>
              name<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">chunk-vendors</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
              test<span class="token operator">:</span> <span class="token regex">/[\\/]node_modules[\\/]/</span><span class="token punctuation">,</span>
              priority<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span>
              chunks<span class="token operator">:</span> <span class="token string">'initial'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            common<span class="token operator">:</span> <span class="token punctuation">{</span>
              name<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">chunk-common</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
              minChunks<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
              priority<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">20</span><span class="token punctuation">,</span>
              chunks<span class="token operator">:</span> <span class="token string">'initial'</span><span class="token punctuation">,</span>
              reuseExistingChunk<span class="token operator">:</span> <span class="token boolean">true</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="修改打包配置"><a href="#修改打包配置" class="header-anchor">#</a> 修改打包配置</h3> <p><strong>在根目录中创建一个 .env.production 文件</strong></p> <div class="language-env extra-class"><pre class="language-text"><code># 是否生成 .map 文件
GENERATE_SOURCEMAP=false

# 是否把 runtime chunk 生成到 html 模板中
INLINE_RUNTIME_CHUNK=false

# 编码图片的大小限制
IMAGE_INLINE_SIZE_LIMIT=30000
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div><div class="global-ui"></div></div>
    <script src="/riant/assets/js/app.c1a7218f.js" defer></script><script src="/riant/assets/js/2.d60fca52.js" defer></script><script src="/riant/assets/js/9.90554817.js" defer></script>
  </body>
</html>
